// 想要由后端返回路由菜单，但是由于 component 属性无法保存在后端，所以建立路径和 component 映射关系，用于生成菜单时候加载前端组件并渲染
// 注：component: () => import("/@/xxx")
import { asyncRoutes } from '.'
import { EXCEPTION_COMPONENT, LAYOUT } from '../constant'

// 使用 name 和 component 路径映射
export const ROUTE_NAME_TO_COMPONENT_MAP = {
  Dashboard: LAYOUT,
  About: LAYOUT,
  Charts: LAYOUT,
  AboutPage: () => import('/@/views/sys/about/index.vue'),
  Analysis: () => import('/@/views/dashboard/analysis/index.vue'),
  Workbench: () => import('/@/views/dashboard/workbench/index.vue'),
  NOT_FOUND: EXCEPTION_COMPONENT,
  PageNotFound: EXCEPTION_COMPONENT,
  BaiduMap: () => import('/@/views/demo/charts/map/Baidu.vue')
}

// 使用工具函数直接从 asyncRoute 中提取 name 和 component 的映射关系
export const getNameComponentMap = (tree) => {
  tree.forEach(item => {
    if(item.children && item.children.length){
      getNameComponentMap(item.children)
    }
    ROUTE_NAME_TO_COMPONENT_MAP[item.name] = item.component
  })
  return ROUTE_NAME_TO_COMPONENT_MAP
}

getNameComponentMap(asyncRoutes)
